<template>
  <div class="venue">
    <div class="venue__slider">
      <van-swipe class="my-swipe" indicator-color="#FE4F02">
        <van-swipe-item v-for="item in data" :key="item.id">
          <img class="images" :src="item.imageUrl"/>
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="venue__advert">
      <advert></advert>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Advert from './components/advert.vue'
export default {
  name: 'Venue',
  data () {
    return {}
  },
  components: {
    Advert
  },
  computed: {
    ...mapGetters(['homeList'])
  },
  watch: {
    'homeList.data.banner.left': {
      immediate: true,
      handler (val) {
        this.data = val
        console.log('获取数据left', val)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.venue{
     width: 702px;
     height: 498px;
     display: flex;
     margin: 18px auto;
     &__slider{
        width: 342px;
    height: 498px;
    background: skyblue;
    border-radius: 12px;
    overflow: hidden;

    .images{
      width: 100%;
    }
     }
     &__advert{
       margin-left:18px ;
     }
}
</style>
